<!--
 * @Author: shiweizhen 787632169@qq.com
 * @Date: 2025-06-23 16:00:37
 * @LastEditors: shiweizhen 787632169@qq.com
 * @LastEditTime: 2025-07-03 16:53:39
 * @Description: 
 * Copyright (c) 2025-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <div class="bg-[#f3f5f7] h-full w-full">
    <div class="h-[60px] bg-white w-full px-4 flex justify-between items-center">
      <el-button type="primary" @click="handleOpen()">新建业务</el-button>
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
    <div class="w-full h-[60px] bg-white px-4 flex gap-2 items-center mt-[16px]">
      <el-input v-model="projectName" placeholder="请输入名称" style="width: 300px;" />
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
    <el-space :size="16" wrap
      class="project-list w-full max-h-[calc(100vh-60px-16px-16px-60px)] p-4 bg-white mt-[16px] overflow-hidden overflow-y-auto">

      <el-card v-for="item in projectList" :key="item.id">
        <div class="flex flex-col">
          <div class="flex">
            <label class="label">名称</label>
            <span class="text">{{ item.projectName }}</span>
          </div>
          <div class="flex">
            <label class="label">描述</label>
            <span class="text text-ellipsis">{{ item.description }}</span>
          </div>
          <!-- <div class="flex">
            <label class="label">创建时间</label>
            <span class="text">{{ item.createTime }}</span>
          </div> -->
        </div>
        <template #footer>
          <el-button type="primary" size="small" @click="handleOpen(item)">编辑</el-button>
          <el-button type="primary" size="small" @click="handleCopy(item)">复制</el-button>
          <el-button type="danger" size="small" @click="handleDelete(item)">删除</el-button>
        </template>
      </el-card>
    </el-space>
  </div>

  <ProjectDialog ref="projectDialogRef" @close="getList" />
</template>

<script lang="ts" setup>
import ProjectDialog from './components/project-dialog.vue';
import { ProjectType } from '@/api/project/types';
import { getMiddleList, deleteMiddle, copyMiddle } from '@/api/project'
const vm = getCurrentInstance()!
const { $modal } = vm.appContext.config.globalProperties
const router = useRouter()

const projectList = ref<ProjectType[]>([])
const projectName = ref('')

const getList = async () => {
  const res = await getMiddleList(projectName.value)
  projectList.value = res.data.records
}

const handleReset = () => {
  projectName.value = ''
  getList()
}

const projectDialogRef = ref<InstanceType<typeof ProjectDialog>>()

const handleOpen = (item?: ProjectType) => {
  projectDialogRef.value?.handleOpen(item)
}

const handleDelete = (item: ProjectType) => {
  $modal.confirm('确定删除该业务吗？', '提示').then(async () => {
    await deleteMiddle(item.id!)
    $modal.msgSuccess('删除成功')
    getList()
  })
}

const handleCopy = async (item: ProjectType) => {
  await copyMiddle(item.id!)
  $modal.msgSuccess('复制成功')
  getList()
}

const goBack = () => {
  router.push('/')
}

onMounted(() => {
  getList()
})

</script>

<style scoped lang="scss">
.label {
  width: 60px;
  color: #303444;
  font-size: 14px;
  text-align: left;
  line-height: 23px;
}

.text {
  color: #303444;
  font-size: 14px;
  line-height: 23px;
  flex: 1;
}

.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

:deep(.project-list .el-space__item) {
  width: calc(100% / 4 - 16px);
}
</style>